<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue9-01</title>
</head>
<body>
	<div id="app">
		<anchor :level="2" title="特性">特性</anchor>
		<script type="text/x-template" id="anchor">
			<div>
				<h1 v-if="level === 1">
					<a :href="'#' + title">
						<slot></slot>
					</a>
				</h1>
				<h2 v-if="level === 2">
					<a :href="'#' + title">
						<slot></slot>
					</a>
				</h2>
				<h3 v-if="level === 3">
					<a :href="'#' + title">
						<slot></slot>
					</a>
				</h3>
				<h4 v-if="level === 4">
					<a :href="'#' + title">
						<slot></slot>
					</a>
				</h4>
				<h5 v-if="level === 5">
					<a :href="'#' + title">
						<slot></slot>
					</a>
				</h5>
				<h6 v-if="level === 6">
					<a :href="'#' + title">
						<slot></slot>
					</a>
				</h6>
			</div>
		</script>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script>
		Vue.component('anchor',{
			template:'#anchor',
			props:{
				level:{
					type:Number,
					required:true
				},
				title:{
					type:String,
					default:''
				}
				
			}
		})

		var app = new Vue({
			el:'#app'
		})
	</script>
</body>
</html>